<template>
  <a-modal v-model:visible="visible" :title="title" :width="600" :mask-closable="false" @cancel="handleCancel">
    <a-form
      ref="FormRef"
      :model="formFields"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item label="词库名称" name="libId">
        <span v-if="mode === Mode.edit">{{ data.libName }}</span>
        <lib-searcher
          v-else
          v-model:lib-id="formFields.libId"
          :options="libList"
          :searching="searching"
          @on-search="emit('on-search', $event)"
          @on-change="handleChange"
        ></lib-searcher>
      </a-form-item>
      <a-form-item label="匹配方式" name="matchStyle">
        <span v-if="mode === Mode.edit">{{ PatternKeyMap[data.matchStyle] }}</span>
        <a-select v-else placeholder="请选择匹配方式" v-model:value="formFields.matchStyle" :options="matchPattern" />
      </a-form-item>
      <a-form-item label="行业" name="industryId">
        <industry-cascader
          v-model:industry-id="formFields.industryId"
          :industry-list="industryList"
          @change="handleIndustryChange"
        />
      </a-form-item>
      <a-form-item label="关键词" name="word">
        <a-input v-model:value="formFields.word" placeholder="请输入关键词" allow-clear />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="submit" type="primary" :loading="submitting" @click="handleSubmit"> 提交 </a-button>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useVModel } from '@vueuse/core'
import type { FormInstance } from 'ant-design-vue'
import type { DictFields } from '@/services/dict-management/updateDict'
import { PatternEnum, PatternKeyMap } from '@/views/word-lib/interface'
import IndustryCascader from '@/components/industry-cascader/index.vue'
import type { WordLib } from '@/services/word-lib/getWordLib'
import LibSearcher from '@/views/word-lib/components/LibSearcher.vue'
import { omit } from 'lodash-es'
import { toLabelValue } from '@/utils'
import { Mode } from '@/core/interfaces/common'
import type { Industry } from '@/core/interfaces/industry'

interface Props {
  show: boolean
  data: Partial<DictFields>
  submitting: boolean
  searching: boolean
  mode: Mode
  industryList: Industry[]
  libList: WordLib[]
}

interface Emits {
  (e: 'on-submit'): void
  (e: 'on-search', v: string): void
}

const emit = defineEmits<Emits>()
const props = withDefaults(defineProps<Props>(), {
  show: false,
  mode: Mode.create,
  searching: false,
  submitting: false,
  libList: () => [],
  industryList: () => []
})
const matchPattern = ref(toLabelValue(omit(PatternKeyMap, PatternEnum.ALL)))
const visible = useVModel(props, 'show')
const formFields = useVModel(props, 'data')
const FormRef = ref<FormInstance>()

const title = computed(() => {
  return props.mode === Mode.create ? '添加关键词' : '更新关键词'
})

const formRules = computed(() => {
  return {
    libId: [
      {
        required: props.mode === Mode.create,
        trigger: 'blur',
        message: '请选择词库名称'
      }
    ],
    matchStyle: [
      {
        required: props.mode === Mode.create,
        trigger: 'blur',
        message: '请选择匹配方式'
      }
    ],
    industryId: [
      {
        required: true,
        trigger: 'blur',
        message: '请选择行业'
      }
    ],
    word: [
      {
        required: true,
        trigger: 'change',
        message: '请输入关键词'
      }
    ]
  }
})

function handleIndustryChange() {
  formFields.value.industryCode = props.industryList.find((item) => item.id === formFields.value.industryId)?.code
}

function handleChange(libId: WordLib['id']) {
  formFields.value.libName = props.libList.find((item) => item.id === libId)?.name ?? ''
}

function handleSubmit() {
  FormRef.value?.validate().then(() => {
    emit('on-submit')
  })
}

function handleCancel() {
  FormRef.value?.resetFields()
  visible.value = false
}
</script>

<script lang="ts">
export default { name: 'BannedWordUpdater' }
</script>
